<template>
  <view class="contain">
    <view class="header">
      <view :style="{ height: statusBarHeight + 'px' }"></view>
      <!-- 导航栏内容 -->
      <view
        class="navbar"
        :style="{ height: navBarHeight + 'px', width: windowWidth + 'px' }"
      >
        <i class="iconfont icon-left" @click="goBack"></i>
        <span>地址管理</span>
      </view>
    </view>
    <view class="body">
      <scroll-view scroll-y="true" scroll-top="0" style="height: 600px">
        <view v-for="item in addressList" :key="item.id">
          <u-swipe-action>
            <u-swipe-action-item
              :options="options"
              @click="swipeClick(item.id)"
            >
              <view class="swipe-action u-border-top u-border-bottom">
                <view class="content">
                  <view class="info">
                    <span
                      >{{ item.receiver }} <i>{{ item.contact }}</i>
                      <span v-if="item.isDefault">默认</span></span
                    >
                    <p>{{ item.fullLocation }}{{ item.address }}</p>
                  </view>
                  <view>
                    <navigator
                      :url="
                        '/pages/my/address/from?id=' +
                        item.id +
                        '&name=编辑地址'
                      "
                      hover-class="navigator-hover"
                    >
                      <i class="iconfont icon-liuyan"></i>
                    </navigator>
                  </view>
                </view>
              </view>
            </u-swipe-action-item>
          </u-swipe-action>
        </view>
      </scroll-view>

      <navigator
        url="/pages/my/address/from?name=新建地址"
        hover-class="navigator-hover"
      >
        <button class="button">新建地址</button>
      </navigator>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      statusBarHeight: 20,
      navBarHeight: 45,
      windowWidth: 375,
      addressList: [],
      options: [
        {
          text: "删除",
          style: {
            backgroundColor: "#f56c6c",
          },
        },
      ],
    };
  },
  created() {
    // 获取手机信息
    const info = uni.getSystemInfoSync();
    // console.log(info.statusBarHeight)
    this.statusBarHeight = info.statusBarHeight;
    this.windowWidth = info.windowWidth;

    // 获取胶囊按钮位置
    // #ifndef APP-PLUS || H5 || MP-ALIPAY
    const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
    // console.log(menuButtonInfo)
    // （胶囊底部高度-状态栏的高度）+ （胶囊顶部的高度-状态栏的高度）== 导航栏的高度
    this.navBarHeight =
      menuButtonInfo.bottom -
      info.statusBarHeight +
      (menuButtonInfo.top - info.statusBarHeight);
    // console.log(navBarHeight)
    this.windowWidth = menuButtonInfo.left;
    // #endif
  },
  onLoad() {
    // this.$store.dispatch.getToken()
    this.getAddressList();
  },
  onShow() {
    this.getAddressList();
  },
  methods: {
    // 获取地址列表
    async getAddressList() {
      const res = await uni.$u.http.get("/member/address");
      console.log("地址列表", res);
      this.addressList = res.data.result;
    },
    // 删除地址
    async deleteAddress(id) {
      const res = await uni.$u.http.delete(`/member/address/${id}`);
    },
    // 返回上一个页面
    goBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
    async swipeClick(id) {
      console.log("swipe点击了", id);
      await this.deleteAddress(id);
      this.getAddressList();
    },
  },
};
</script>


<style lang="scss">
@import "../../../static/fonts.scss";
.contain {
  background-color: rgba(244, 242, 242, 0.927);
  height: 750px;
  .header {
    background-color: #fff;
    .navbar {
      display: flex;
      align-items: center;
      width: 100%;
      height: 56px;
      i {
        width: 20px;
        // height: 20px;
        // background-color: aqua;
      }
      span {
        flex: 1;
        text-align: center;
      }
    }
  }
  .body {
    margin: 6px;
    .u-page {
      padding: 0;
    }

    .u-demo-block__title {
      padding: 10px 0 2px 15px;
    }

    .swipe-action {
      .content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 60px;
        padding: 10px;
        color: #6b6b6b;
        background-color: #fff;
        border: 1px solid rgb(233, 233, 233);
        span {
          color: black;
          font-weight: 700;
          i {
            margin-left: 10px;
            display: inline;
            font-weight: 400;
          }
          span {
            display: inline-block;
            width: 30px;
            height: 16px;
            margin: 0 0 6px 6px;
            font-size: 10px;
            font-weight: 400;
            text-align: center;
            line-height: 16px;
            color: #6b6b6b;
            border: 1px solid rgb(176, 172, 172);
          }
        }
        p {
          margin-top: 6px;
          font-size: 14px;
        }
      }
    }

    .button {
      position: fixed;
      bottom: 6px;
      z-index: 10;
      color: #fff;
      width: 97%;
      line-height: 40px;
      font-size: 14px;
      background-color: #0ecfa5;
      height: 40px;
      border-radius: 20px;
    }
  }
}
</style>